<template>
  <view class="change-email">
    <u-navbar
      :title="$t('user.Change-Email')"
      :autoBack="false"
			@leftClick="gotoBack"
      bgColor="#F6F6F6"
      titleStyle="font-weight: 500; color: #000000;"
      :placeholder="true"
    ></u-navbar>
    <view class="label">{{$t('user.email-tips1')}}</view>
    <view class="content">
      <view>
        <input v-model="email" class="email-view" :placeholder="$t('user.Email')"/>
      </view>
      <view class="code-views">
         <input v-model="emailCode" :placeholder="$t('index.Verification-Code')"/>
         <view v-if="!codeShow" class="code" @click="getCodeHandle">{{
           $t("index.GET")
         }}</view>
         <view v-else>
         	<u-count-down :time="60 * 1000" format="ss" @change="onChange" @finish="codeShow = false">
         		<view class="count-down">
         			<text class="count-down__item">{{ timeData.seconds }}</text>s
         		</view>
         	</u-count-down>
         </view>
      </view>
    </view>
    <button class="Change" @click="handleConfirm">{{$t('index.Confirm')}}</button>
  </view>
</template>

<script>
import { changeEmail } from "@/services/user";
	import {
		querySendMail
	} from "@/services/login";
  export default {
    data(){
      return{
        email:'',
        emailCode:'',
        codeShow:false,
        timeData: {},
      }
    },
    methods:{
			gotoBack() {
				uni.redirectTo({
					url: '/pagesUser/setting/Email?email='+ (this.$store.state.userInfo.email || '')
				});
			},
      onChange(e) {
      	this.timeData = e;
      },
      async getCodeHandle() {
        if (!this.email || this.email.length === 0) {
          uni.showToast({
            title: this.$t("login.emailError"),
            icon: "none",
            duration: 2000,
          });
          return
        }
        const resp = await querySendMail({
          mail: this.email
        })
        if (!resp.success) return;
        this.codeShow = true;
        uni.showToast({
          title: this.$t("index.Sentsuccessfully"),
          icon: "none",
          duration: 1500,
        });
      },
      async handleConfirm(){
        if(!this.email){
          return uni.showToast({
            title: this.$t("user.email"),
            icon: "error",
          });
        }
        if(!this.emailCode){
          return uni.showToast({
            title: this.$t("user.phoneNumberCode"),
            icon: "error",
          });
        }
        const resp=await changeEmail({email:this.email,emailCode:this.emailCode})
        if(!resp.success)return
        uni.switchTab({
          url: '/pages/user/User'
        });
      }
    },
    
  }
</script>

<style lang="scss" scoped>
.change-email{
  padding: 0upx 30upx;
  .label{
    padding: 0upx 11upx;
    margin-top: 66upx;
    font-size: 26upx;
    font-weight: 400;
    color: #878787;
  }
  .content{
    padding: 0upx 30upx;
    background: #FFFFFF;
    border-radius: 20upx;
    margin-top: 50upx;
  }
  .email-view{
    padding: 44upx 0upx;
  }
  .code-views{
    border-top: 2upx solid #F6F6F6;
    padding: 44upx 0upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .code{
    font-size: 30upx;
    font-weight: 400;
    color: #61BDB2;
  }
  .Change{
    width: 100%;
    height: 90upx;
    background: #61BDB2;
    border-radius: 20upx;
    font-size: 30upx;
    font-weight: 500;
    color: #FFFFFF;
    margin-top: 80upx;
    text-align: center;
    line-height: 90upx;
    &::after {
      border: none;
    }
  }
}
/deep/ .uni-input-placeholder{
  color: #A6A6A6;
  font-size: 30upx;
  font-weight: 400;
}
</style>